<template>
  <div class="SingleFileArea">
    <h4>书影原文对照</h4>
    <div v-if="localIsMongolianFont" class="MengInput" style="
            writing-mode: vertical-lr;
            text-orientation: sideways-right;
            font-family: OyunQaganTig, sans-serif;
            background-color: #ecddd6;
            width: 550px;
            height: 200.33px;
            font-size: 18px;
            ">
            {{ localTextData }}
          </div>
    <el-input
      v-else
      type="textarea"
      :rows="6"
      placeholder="请上传书影原文文件"
      v-model="localTextData"
      :style="{
        fontFamily: localIsMongolianFont ? 'MHR8102' : 'inherit',
        writingMode: localIsMongolianFont ? 'vertical-rl' : 'horizontal-tb',
        textOrientation: localIsMongolianFont ? 'sideways-right' : 'mixed',
      }"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    textData: String,
    isMongolianFont: Boolean
  },
  data () {
    return {
      localTextData: '',
      localIsMongolianFont: this.isMongolianFont
    }
  },
  watch: {
    isMongolianFont (newValue) {
      this.localIsMongolianFont = newValue
      console.log(this.localIsMongolianFont)
    },
    textData (newTextData) {
      this.localTextData = newTextData
    }
  },
  methods: {
    containsMongolianCharacters (text) {
      return /[\u1800-\u18AF]/.test(text)
    }
  }
}
</script>

<style scoped lang="less">
.SingleFileArea {
  display: block;
  height: 280px;
}

/deep/.el-textarea__inner {
  background-color: #ecddd6;
}
</style>
<style scoped lang="less">
.SingleFileArea {
  display: block;
  height: 280px;
}
//  color: #343434;
// -webkit-user-modify: read-write-plaintext-only;
// overflow-wrap: break-word;
// -webkit-line-break: after-white-space;
// margin: 0;
// width: 651px;
// height: 300px;
// border: 2px solid #dfdfd0;
// padding: 5px;
// overflow-y: auto;
// writing-mode: vertical-lr;
// text-orientation: sideways-right;
// font-family: OyunQaganTig, sans-serif;
// font-size: 20px;
/deep/.el-textarea__inner {
  background-color: #ecddd6;
  font-size: 18px;
}

/* 引入本地字体文件 */
@font-face {
  font-family: "MHR8102";
  src: url("@/assets/fonts/MHR8102.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
</style>
